<template>
  <div class="user-wrapper">
    <div class="content">
      <div class="left-box" v-if="$auth.user">
        <div class="user-info">
          <div
            :class="
              $auth.user.is_open_member && $auth.user.is_money_level
                ? 'svip'
                : ''
            "
          >
            <img class="avatar" :src="$auth.user.avatar" alt="" />
            <img
              src="~assets/images/svipSign.png"
              class="sign"
              v-if="$auth.user.is_open_member && $auth.user.is_money_level"
            />
          </div>
          <p class="name line2">{{ $auth.user.nickname }}</p>
        </div>
        <div class="user-menu">
          <div
            @click="goPage(menu, index)"
            class="menu-item"
            v-for="(menu, index) in userMenu"
            :key="index"
            :class="{ active: menuCur == menu.key }"
          >
            {{ menu.title }}
          </div>
        </div>
      </div>
      <div class="right-box">
        <NuxtChild />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "user",
  auth: "guest",
  data() {
    return {
      userMenu: [
        {
          key: 0,
          link: "/user",
          title: "賬戶管理",
        },
        {
          key: 4,
          title: "我的訂單",
          link: "/user/orderList",
        },
        {
          key: 7,
          title: "站内信",
          link: "/user/messageCenter",
        },
        {
          key: 1,
          title: "我的優惠券",
          link: "/user/myCoupon",
        },
        {
          key: 2,
          title: "我的余額",
          link: "/user/balance",
        },
        {
          key: 6,
          title: "我的收藏",
          link: "/user/collect",
        },
        {
          key: 3,
          title: "地址管理",
          link: "/user/address_list",
        },

        {
          key: 5,
          title: "領取優惠券",
          link: "/user/userCoupon",
        },
      ],
      menuCur: 0,
      userInfo: {},
      indexCur: 0,
    };
  },
  async asyncData({ query }) {
    return {
      indexCur: query.page_type,
    };
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.userMenu.forEach((el, index) => {
          if (el.link == val.path) {
            this.menuCur = el.key;
            this.indexCur = index;
          }
        });
      },
      // 深度观察监听
      deep: true,
    },
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "個人中心-" + this.$store.state.titleCon,
    };
  },
  created() {
    this.userMenu.forEach((el) => {
      if (el.link == this.$route.path) {
        this.menuCur = el.key;
      }
    });
  },
  methods: {
    goPage(menu, index) {
      this.menuCur = menu.key;
      this.$router.push({
        path: `${menu.link}`,
        query: { page_type: `${index}` },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0;

  .content {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
  }

  .left-box {
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
      margin-top: 100px;
      color: $ivory;
      background: $charcoal;
      border-radius: 4px;
      font-size: 14px;
      transition: all 0.3s ease;

      .svip {
        background: url("~assets/images/vipUser.png") center/cover no-repeat;
        width: 64px;
        height: 68px;
        position: relative;
        transition: all 0.3s ease;

        .sign {
          width: 32px;
          height: 14px;
          position: absolute;
          bottom: -12px;
          left: 50%;
          margin-left: -16px;
        }
      }

      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 2px solid $light-gray;
        transition: all 0.3s ease;

        &:hover {
          border-color: $gold-light;
        }
      }

      .name {
        margin-top: 16px;
        padding: 0 16px;
        font-weight: 500;
        text-align: center;
        line-height: 1.4;
      }
    }

    .user-menu {
      margin-top: 8px;
      box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .menu-item {
        display: flex;
        align-items: center;
        padding: 16px 24px;
        background-color: $slate;
        color: $ivory;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        border-bottom: 1px solid $light-gray;
        transition: all 0.3s ease;
        position: relative;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background: $gold-accent;
          color: $ivory;
          transform: translateX(4px);
        }

        &.active {
          background: $gold-accent;
          color: $ivory;
          font-weight: 600;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: $gold-accent;
          }
        }
      }
    }
  }

  .right-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.router-tips {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  padding: 0 32px;
  border-bottom: 1px solid $light-gray;

  a {
    color: $ivory;
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: $gold-accent;
    }
  }

  span {
    color: $light-gray;
  }
}

.avatar:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

// 響應式設計
@media (max-width: 1200px) {
  .user-wrapper {
    .left-box {
      width: 180px;

      .user-info {
        padding: 24px 16px;

        img {
          width: 56px;
          height: 56px;
        }

        .svip {
          width: 56px;
          height: 60px;
        }
      }

      .user-menu .menu-item {
        padding: 14px 20px;
        font-size: 13px;
      }
    }

    .right-box {
      padding: 24px;
    }
  }
}

@media (max-width: 768px) {
  .user-wrapper {
    .content {
      flex-direction: column;
    }

    .left-box {
      width: 100%;

      .user-info {
        flex-direction: row;
        padding: 20px;
        text-align: left;

        img,
        .svip {
          margin-right: 16px;
        }

        .name {
          margin-top: 0;
          padding: 0;
          flex: 1;
        }
      }

      .user-menu {
        display: flex;
        overflow-x: auto;

        .menu-item {
          white-space: nowrap;
          border-bottom: none;
          border-right: 1px solid $light-gray;

          &:last-child {
            border-right: none;
          }

          &.active::before {
            top: auto;
            bottom: 0;
            left: 0;
            right: 0;
            width: auto;
            height: 4px;
          }
        }
      }
    }

    .right-box {
      width: 100%;
    }
  }
}
</style>
